﻿@{
    ViewBag.Title = "FlexiGrid";
    
}
@section Head{
<link href="@Url.Content("~/Content/flexigrid.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/flexigrid.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#flex1").flexigrid({
            url: '/Home/GridData',
            dataType: 'json',
            colModel: [
		        { display: 'EmpID', name: 'EmpID', width: 40, sortable: true, align: 'center' },
		        { display: 'FirstName', name: 'FirstName', width: 120, sortable: true, align: 'center' },
		        { display: 'LastName', name: 'LastName', width: 120, sortable: true, align: 'center' },
		        { display: 'Gender', name: 'Gender', width: 80, sortable: true, align: 'center' },
		        { display: 'BirthDate', name: 'BirthDate', width: 120, sortable: true, align: 'center' },
                { display: 'HireDate', name: 'HireDate', width: 120, sortable: true, align: 'center' },
                { display: 'DeptName', name: 'DeptName', width: 120, sortable: true, align: 'center' },
                { display: 'EmpTitle', name: 'EmpTitle', width: 120, sortable: true, align: 'center' }
		    ],
            searchitems: [
		        { display: 'EmpID', name: 'EmpID' },
		        { display: 'FirstName', name: 'FirstName', isdefault: true }
		    ],
            sortname: "EmpID",
            sortorder: "asc",
            usepager: true,
            title: 'Countries',
            useRp: true,
            rp: 10,
            showTableToggleBtn: true,
            width: 700,
            onSubmit: function() {
                //passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
                var dt = $('#sform').serializeArray();
                $("#flex1").flexOptions({ params: dt });
                return true;
            },
            height: 500
        });
    });
    //This function adds paramaters to the post of flexigrid. You can add a verification as well by return to false if you don't want flexigrid to submit			
    $('#sform').submit(function () {
        $('#flex1').flexOptions({ newp: 1 }).flexReload();
        return false;
    });
</script>
}
<p>This is a sample implementation attached to a form, to add additional parameters.</p>

<form id="sform" action="">
	<p>
	The values you entered will be place in name column for demo's sake.<br />
	Value 1 : <input type="text" name="val1" value="" autocomplete="off" /><br />
    Value 2 : Is a hidden input with value 3<input type="hidden" name="val2" value="3" /><br />
    Value 3 : 
    <select name="val3">
    	<option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
    </select><br />
    Value 4 : <input type="checkbox" name="val4" id="val4" value="4" /><label for="val4">This will pass a value 4 if checked</label>
    </p>
    <p>
	    <input type="submit" value="Submit" />
    </p>
</form>
<table id="flex1" style="display:none"></table>
